<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>豆豆科技 - 行业资讯</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/base.css">
		<link rel="stylesheet" href="./css/fullpage.css">
		<link rel="stylesheet" href="./css/swiper.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
	</head>

	<body>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-xs6">
					<div style="padding-left: 30%;">
						<img src="img/logo.png" height="60" />
					</div>
				</div>
				<div class="layui-col-xs6">
					<div class="grid-demo">
						<ul class="layui-nav">
							<li class="layui-nav-item">
								<a href="index.html">首页</a>
							</li>
							<li class="layui-nav-item">
								<a href="business.html">业务范围</a>
							</li>
							<li class="layui-nav-item layui-this">
								<a href="javascript:;">行业资讯</a>
							</li>
							<li class="layui-nav-item">
								<a href="customer.html">客户合作</a>
							</li>
							<li class="layui-nav-item">
								<a href="about.html">关于我们</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="industry-top">
			<div class="industry-top-bg">
				<img src="img/industry1.png" width="100%" />
			</div>
			<div class="industry-top-title">
				<p>行业资讯</p>
				<p class="industry-message-title-en">Industry information</p>
				<hr />
			</div>
		</div>
		<div class="industry-content">
			<div class="layui-row layui-col-space15 list">
				<!--<div class="layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">小程序定制开发需要注意的事项</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 30px;height: 170px;overflow: hidden;">我们可以从微信这个平台上面观察出来，如今非常支持的是对企业之间的合作，所以也就是因为这样的一个措施，让微信上的小程序绝对是成为了今年在移动互联网行业当中最火热的一个产品，而且我们可以预见，在未来不久，小程序绝对会是继微信公众号之后，最新企业的新流量入口。而且有一个非常严峻的现实就是如今的微信公众号，可以说是趋于累一个饱和的状态，但是像微信小程序却不一样，他才刚刚起步没多长时间，所以很多企业已经看中了这一块香饽饽开始纷纷的抢占各个市场。</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry5.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;height: 48px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">
							<img src="img/industry2.png" width="100%" />
						</div>
						<div class="layui-card-body">
							<div>
								<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">一图看清楚微信小程序产业链</p>
							</div>
							<div>
								<p style="color: #666666;margin-bottom: 10px;">有人说，互联网，无论是在PC时代，还是移动时代……</p>
							</div>
							<div style="position: relative;">
								<div><span>2018-10-30</span></div>
								<div style="position: absolute;right: 0;top: 0;" id="like">
									<span><img src="img/industry3.png"></span>
									<span>2556</span>
									<span><img src="img/industry4.png"></span>
									<span>987</span>
								</div>
							</div>
						</div>
					</div>
				</div>-->
			</div>
			<div>
				<div id="test1"></div>
			</div>
		</div>
		<div class="footer" style="height: 25px;bottom: auto;">
			<div class="infoot">
				<p>Copyright © 2020
					<a href="http://beian.miit.gov.cn/publish/query/indexFirst.action" target="_blank" rel="noopener noreferrer">
						鄂ICP备00000000号 </a>
				</p>
			</div>
		</div>
		<script src="./layui/layui.all.js"></script>
		<script src="./js/jquery.min.js"></script>
		<script src="./js/swiper.min.js"></script>
		<script src="./js/fullpage.js"></script>
		<script src="js/public.js"></script>
		<script>
			//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
			var layer = layui.layer,
				laypage = layui.laypage,
				carousel = layui.carousel,
				form = layui.form;
			$(function() {
				getList(1);
			})

			function getList(current) {
				$.ajax({
					type: "get",
					url: ip + "/api/news",
					data: {
						size: 9,
						current: current,
					},
					dataType: 'json',
					async: true,
					success: function(res) {
						let list = res.data.records;
						laypage.render({
							elem: 'test1',
							count: res.data.total,
							prev: '',
							next: '',
							limit: '9',
							curr: current,
							jump: function(obj, first) {
								if(!first) {
									getList(obj.curr);
								}
							}
						});
						$('.list').children('div').remove();
						list.forEach((item, i) => {
							let str;
							if(list.length == 1) {
								str = '<div class="layui-col-md15">' +
									'<div class="layui-card">' +
									'<div class="layui-card-header">' +
									'<img src="' + item.imgUrl + '" width="100%" />' +
									'</div>' +
									'<div class="layui-card-body">' +
									'<div>' +
									'<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">' + item.title + '</p>' +
									'</div>' +
									'<div>' +
									'<div style="color: #666666;margin-bottom: 30px;height: 170px;overflow: hidden;">' + item.content + '</div>' +
									'</div>' +
									'<div style="position: relative;">' +
									'<div><span>2018-10-30</span></div>' +
									'<div class="likeClick" id="' + item.id + '" style="position: absolute;right: 0;top: 0;">';
								if(item.liked) {
									str += '<span><img src="img/industry5.png"></span>';
								} else {
									str += '<span><img src="img/industry4.png"></span>';
								}
								str += '<span>' + item.likeNum + '</span>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>';
								$('.list').append(str);
							} else if(list.length == 2) {
								str = '<div class="layui-col-md6">' +
									'<div class="layui-card">' +
									'<div class="layui-card-header">' +
									'<img src="' + item.imgUrl + '" width="100%" />' +
									'</div>' +
									'<div class="layui-card-body">' +
									'<div>' +
									'<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">' + item.title + '</p>' +
									'</div>' +
									'<div>' +
									'<div style="color: #666666;margin-bottom: 30px;height: 170px;overflow: hidden;">' + item.content + '</div>' +
									'</div>' +
									'<div style="position: relative;">' +
									'<div><span>2018-10-30</span></div>' +
									'<div class="likeClick" id="' + item.id + '" style="position: absolute;right: 0;top: 0;">';
								if(item.liked) {
									str += '<span><img src="img/industry5.png"></span>';
								} else {
									str += '<span><img src="img/industry4.png"></span>';
								}
								str += '<span>' + item.likeNum + '</span>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</div>';

								$('.list').append(str);
							} else {
								if(i == 0) {
									str = '<div class="layui-col-md6">' +
										'<div class="layui-card">' +
										'<div class="layui-card-header">' +
										'<img src="' + item.imgUrl + '" width="100%" />' +
										'</div>' +
										'<div class="layui-card-body">' +
										'<div>' +
										'<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;">' + item.title + '</p>' +
										'</div>' +
										'<div>' +
										'<div style="color: #666666;margin-bottom: 30px;height: 170px;overflow: hidden;">' + item.content + '</div>' +
										'</div>' +
										'<div style="position: relative;">' +
										'<div><span>2018-10-30</span></div>' +
										'<div class="likeClick" id="' + item.id + '" style="position: absolute;right: 0;top: 0;">';
									if(item.liked) {
										str += '<span><img src="img/industry5.png"></span>';
									} else {
										str += '<span><img src="img/industry4.png"></span>';
									}
									str += '<span>' + item.likeNum + '</span>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'</div>';
									$('.list').append(str)
								} else {
									str = '<div class="layui-col-md3">' +
										'<div class="layui-card">' +
										'<div class="layui-card-header">' +
										'<img src="' + item.imgUrl + '" width="100%" />' +
										'</div>' +
										'<div class="layui-card-body">' +
										'<div>' +
										'<p style="color: #44b8f6;font-weight: 600;margin-bottom: 10px;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">' + item.title + '</p>' +
										'</div>' +
										'<div>' +
										'<div style="color: #666666;margin-bottom: 10px;height:48px;overflow:hidden;">' + item.content + '</div>' +
										'</div>' +
										'<div style="position: relative;">' +
										'<div><span>2018-10-30</span></div>' +
										'<div class="likeClick" id="' + item.id + '" style="position: absolute;right: 0;top: 0;">';
									if(item.liked) {
										str += '<span><img src="img/industry5.png"></span>';
									} else {
										str += '<span><img src="img/industry4.png"></span>';
									}
									str += '<span>' + item.likeNum + '</span>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'</div>' +
										'</div>';
									$('.list').append(str)
								}
							}
						})
						$('.likeClick').on('click', function(event) {
							var loading = layer.load(2);
							$.ajax({
								type: "post",
								url: ip + "/api/liked/" + $(this).attr('id'),
								dataType: 'json',
								async: true,
								success: function(res) {
									layer.close(loading);
									if(res.code == 200) {
										layer.msg(res.msg);
										getList(current);
									}else{
										layer.msg(res.msg);
									}
								}
							});
						})
					}
				});
			}
		</script>
		<style>
			* {
				font-family: "微软雅黑";
			}
			
			.industry-top {
				position: relative;
				top: -60px;
				margin: 0 auto;
			}
			
			.industry-top-title {
				position: absolute;
				color: #FFFFFF;
				font-size: 48px;
				font-weight: 600;
				top: 30%;
				width: 1200px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.industry-top-title .industry-message-title-en {
				font-size: 26px;
				font-weight: 500;
				padding: 20px 0;
			}
			
			.industry-top-title>hr {
				width: 40px;
				height: 2px;
				border-radius: 5px;
			}
			
			.industry-content {
				width: 1200px;
				margin: 0 auto;
			}
			
			#test1 {
				text-align: right;
				margin: 30px 0;
			}
			
			.layui-card {
				border: 1px solid #f5f5f5;
			}
			
			.layui-card-header {
				height: auto;
				padding: 0;
			}
			
			.layui-card-body {
				padding: 10px 20px;
				background: #f5f5f5;
			}
			
			.layui-card-body img {
				position: relative;
				top: -1px;
			}
			
			.layui-laypage a,
			.layui-laypage span {
				border: 0;
				background: #f5f5f5;
				border-radius: 30px;
				width: 30px;
				height: 30px;
				padding: 0;
				text-align: center;
				margin: 0 5px;
				line-height: 30px;
			}
			
			.layui-laypage .layui-laypage-curr .layui-laypage-em {
				background-color: #44b8f6;
				border-radius: 30px;
				width: 30px;
				height: 30px;
			}
			
			.layui-laypage a:hover {
				color: #44b8f6;
			}
			
			.layui-laypage>a:first-child,
			.layui-laypage>a:first-child em {
				border-radius: 30px;
			}
			
			.layui-laypage>a:last-child,
			.layui-laypage>a:last-child em {
				border-radius: 30px;
			}
			
			.layui-col-md6 .layui-card-header img {
				height: 378px;
			}
			
			.layui-col-md3 .layui-card-header img {
				height: 184px;
			}
			
			* {
				user-select: none;
				-moz-user-select: none;
				-webkit-user-select: none;
			}
		</style>
	</body>

</html>